<template>
  <div id="index" ref="appRef">
    <div class="bg-show" v-if="printShow">
      <div class="no-access">
        <el-card class="no-access-card" shadow="hover">
          <el-icon class="icon">
            <Lock />
          </el-icon>
          <h2>您无权访问该网站</h2>
          <p>如有需求，请与开发者联系</p>
        </el-card>
      </div>
    </div>
    <div class="bg" v-else>
      <div v-if="loading" class="loading">
        <LoadingAnimation></LoadingAnimation>
      </div>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <div class="d-flex aside-width-left">
            <div class="react-left react-l-s">
              <div class="hander-clock">
                <div class="time-item">{{ dateDay }}</div>
                <div class="date-item">
                  <div>
                    {{ dateWeek }}
                  </div>
                  <div>
                    {{ dateYear }}
                  </div>
                </div>
              </div>
            </div>
            <div class="react-left bg-color-blue"></div>
          </div>
          <div class="d-flex aside-width-right"></div>
          <div class="react-right">
            <div class="leftMAA">
              <button :class="{ active: activeChart === 'TpEcharts' }">
                <a href="http://jcynew.hsgc.com/gcjcy/#/"> 来信动态管理</a>
              </button>
              <button :class="{ active: activeChart === 'TpEchartss' }">
                <a href="https://jcy.hairuige.com/largescreen/#/">智慧信访平台</a>
              </button>
              <button :class="{ active: activeChart === 'VisitorEcharts1' }">
                检小慧AI接访
              </button>
            </div>
          </div>
        </div>
        <div class="hander">
          <div class="wather">
          </div>
        </div>
        <!-- 第三行数据 -->
        <div class="body-box">
          <div class="content-box">
            <div class="contentOne">
              <div class="single-box">
                <CommandSystem></CommandSystem>
              </div>
              <div class="single-box">
                <LastMouth />
              </div>
              <div class="single-box">
                <VisitorStay></VisitorStay>
              </div>
            </div>
            <div class="contentTwo">
              <div class="map-hot">
                <AllContrastEcharts></AllContrastEcharts>
              </div>
              <div class="single-box byHour">
                <AllContrast></AllContrast>
              </div>
            </div>
            <div class="contentThree">
              <div class="single-box">
                <TouristOrigin />
              </div>
              <div class="single-box">
                <TouristStatistics></TouristStatistics>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoadingAnimation from "@/components/LoadingAnimation.vue";
import drawMixin from "../utils/drawMixin";
import { formatTime } from "../utils/index.js";
import AllContrastEcharts from "@/components/PageOne/AllContrastEcharts.vue";
import CommandSystem from "@/components/PageOne/CommandSystem.vue";
import LastMouth from "../components/PageOne/LastMouth.vue";
import TouristOrigin from "../components/PageOne/TouristOrigin.vue";
import VisitorStay from "../components/PageOne/VisitorStay.vue";
import TouristStatistics from "../components/PageOne/TouristStatistics.vue";
import AllContrast from "../components/PageOne/AllContrast.vue";
import FingerprintJS from '@fingerprintjs/fingerprintjs';

export default {
  mixins: [drawMixin],
  data() {
    return {
      activeChart: "VisitorEcharts1",
      date: null,
      time: null,
      printShow: false,
      weatherName: require("../../public/white/晴.png"),
      forewarnWeather: "晴",
      weather: "1",
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
    };
  },
  components: {
    // HotMap,
    AllContrastEcharts,
    CommandSystem,
    LastMouth,
    TouristOrigin,
    VisitorStay,
    TouristStatistics,
    AllContrast,
    LoadingAnimation,
  },
  mounted() {
    this.fetchData();
    this.timeFn();
    this.cancelLoading();
    this.getToday();
    this.gerWeather();
    this.getUserFingerprint() // 单独事件获取浏览器指纹
  },
  beforeUnmount() {
    clearInterval(this.timing);
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.$axios.post("/api/survey/case");
        this.printShow  = response.data.msg ==  "您无权访问";
      } catch (error) {
        console.error(error);
      }
    },
    async getUserFingerprint() {
      const fp = await FingerprintJS.load();
      const result = await fp.get();
      this.userFingerprint = result.visitorId;
    },
    // 获取时间
    getToday() {
      var datas = new Date();
      var on1 = "/";
      var on2 = ":";
      var onY = datas.getFullYear(); // 年
      var onM = datas.getMonth() + 1; // 月
      var onD = datas.getDate(); // 日
      var onS = datas.getHours(); // 时
      var onF = datas.getMinutes(); // 分
      var onN = datas.getSeconds(); // 秒

      if (onM >= 1 && onM <= 9) {
        // 月
        onM = "0" + onM;
      }
      if (onD >= 1 && onD <= 9) {
        // 日
        onD = "0" + onD;
      }
      if (onS >= 0 && onS <= 9) {
        // 时
        onS = "0" + onS;
      }
      if (onF >= 0 && onF <= 9) {
        // 分
        onF = "0" + onF;
      }
      if (onN >= 0 && onN <= 9) {
        // 秒
        onN = "0" + onN;
      }

      return {
        date: onY + on1 + onM + on1 + onD,
        time: onS + on2 + onF + on2 + onN,
      };
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    gerWeather() {
      this.$axios
        .get(
          "https://restapi.amap.com/v3/weather/weatherInfo?city=410104&key=07299acebf9c8865e3ec6e2173017435"
        )
        .then((res) => {
          const data = res.data.lives[0];
          this.weatherlis = data;
          this.weather = data.temperature;
        })
        .catch((error) => {
          console.error("Failed to fetch chart data:", error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/index.scss";

.bg-show {
  background-color: #fff;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 40px;
  .no-access {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #fff;
  }

  .no-access-card {
    text-align: center;
    border-radius: 12px;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .icon {
    font-size: 48px;
    margin-bottom: 10px;
  }

  h2 {
    color: #333;
    font-size: 24px;
    margin-bottom: 10px;
  }

  p {
    color: #666;
    font-size: 16px;
  }
}

.AllMap {
  margin-top: 9px;
  margin-left: 300px;
  display: block;
  width: 300px;
  height: 30px;
  color: #fff;
  font-weight: normal;
  font-size: 20px;
  background-image: url("/public/imgs/AllMap.png");
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 30px;
  text-align: center;
}

.hander {
  margin-left: 587px;
  width: 670px;
  font-size: 60px;
  color: #d1e3ff;
  height: 30px;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.hander-clock-A {
  color: #d1e3ff;
  width: 100px;
  height: 24px;
  align-items: flex-start;
  font-size: 12px;
  border-radius: 20px;
  box-sizing: border-box;
  padding-left: 30px;

  a {
    color: #d1e3ff;
    font-size: 20px;
  }
}

.hander-clock-B {
  color: #d1e3ff;
  width: 100px;
  height: 24px;
  font-size: 12px;
  border-radius: 20px;
  margin-left: 5px;
  padding-left: 25px;
  box-sizing: border-box;

  a {
    color: #d1e3ff;
    font-size: 20px;
  }
}

.hander-clock {
  color: #d1e3ff;
  width: 300px;
  height: 60px;
  align-items: flex-start;
  font-size: 12px;
  margin-top: 5px;
  margin-left: 300px;
  border-radius: 20px;
  box-sizing: border-box;
  display: flex;
}

.wather {
  display: flex;
  font-size: 18px;
  align-items: center;
  box-sizing: border-box;

  >img {
    display: block;
    width: 26px;
    height: 26px;
  }
}

.time-item {
  margin-top: 10px;
  font-size: 32px;
  font-weight: 700;
  height: 32px;
  width: 160px;
}

.date-item {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  justify-content: right;
  margin-left: 10px;

  div {
    height: 20px;
  }
}

// 消息预警
.forewarn {
  cursor: pointer;
  position: absolute;
  top: 40px;
  right: 135px;
}

.xiaoxi-img {
  width: 32px;
  height: 32px;
  background-image: url("../../public/imgs/消息red.png");
  animation: glint 1s infinite;
}

.news-num {
  position: absolute;
  top: -3px;
  right: 0;
  color: #fff;
  background-color: #f30;
  font-size: 14px;
  padding: 0px 5px;
  border-radius: 10px;
}

//主题内容部分的布局
.content-box {
  height: 100%;
  margin: 0 24px 21px 24px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 444px 962px 452px;
}

.contentOne {
  display: flex;
  flex-direction: column;
  width: 540px;
  height: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

.contentTwo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 730px;
  height: 971px;
  margin: 0 auto;
  box-sizing: border-box;

  .byHour {
    margin-left: 50px;
    margin-top: 24px !important;
  }
}

.contentThree {
  display: flex;
  flex-direction: column;
  margin-left: -100px;
  width: 550px;
  height: 900px;
  box-sizing: border-box;
}

.single-box {
  margin-top: 5px;
  padding-top: 9px;
  flex: 1;
  text-align: center;
  box-sizing: border-box;
}

.titodhjsahdkjsadsads {
  width: 230px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
  margin-top: 10px;
  font-size: 18px;
}

.map-hot {
  width: 909px;
  height: 620px;
}

.react-right {
  width: 100% !important;
  font-size: 20px;
  padding-top: 10px;

  .leftMAA {
    margin-left: 613px;
  }

  .leftMAA a {
    width: 180px;
    height: 40px;
    line-height: 40px;
  }

  a {
    color: #d8f0ff;
    display: inline-block;
    width: 86px;
    height: 40px;
    background-image: url("../../public/imgs/herf.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  button,
  a {
    background-color: rgba(30, 123, 214, 0);
    width: 180px;
    height: 40px;
    line-height: 40px;
    color: #d8f0ff;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
    border: none;
    background-image: url("../../public/imgs/HandTOPc.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    &.active {
      background-image: url("../../public/imgs/RouterTo.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
